<template>
  <div>
    <Metro-banner :banner="banner" class="metro-banner" />
    <Metro-grid :gridList="gridList" @MetroClick="MetroClick"/>
  </div>
</template>

<script>
import MetroBanner from "./component/MetroBanner.vue";
import MetroGrid from "./component/MetroGrid.vue";
import { MetroApi } from "@/service/metro/metroservice.js";
export default {
  data() {
    return {
      banner: [],
      gridList: [],
    };
  },
  methods: {
    MetroClick(val) {
      console.log(this.$router);
      this.$router.push({path: '/' + val})
    }
  },
  async created() {
    let { data } = await MetroApi();
    if (data.code == 200) {
      this.banner = data.rows;
    }
  },
  mounted() {
    this.gridList = this.$store.state.metro.grid
    console.log(this.gridList);
  },
  components: {
    MetroBanner,
    MetroGrid,
  },
};
</script>

<style scoped>
</style>